غواصی عمیق در سنجش عمق WebXR: تسلط بر پیکربندی بافر عمق

وب از یک صفحه اطلاعاتی دو‌بعدی به فضایی سه‌بعدی و فراگیر در حال تکامل است. در خط مقدم این تحول، WebXR قرار دارد؛ یک API قدرتمند که واقعیت مجازی و افزوده را به مرورگر می‌آورد. در حالی که تجربیات اولیه واقعیت افزوده (AR) در وب چشمگیر بودند، اغلب حس جدا بودن از دنیای واقعی را داشتند. اشیاء مجازی به طور غیرمتقاعدکننده‌ای در فضا شناور بودند و بدون هیچ حسی از حضور، از میان مبلمان و دیوارهای دنیای واقعی عبور می‌کردند.

و اینجا بود که API سنجش عمق WebXR وارد میدان شد. این ویژگی پیشگامانه، یک جهش عظیم به جلو است که به برنامه‌های وب امکان می‌دهد تا هندسه محیط کاربر را درک کنند. این API شکاف بین دنیای دیجیتال و فیزیکی را پر می‌کند و امکان تجربیات واقعاً فراگیر و تعاملی را فراهم می‌آورد که در آن محتوای مجازی به قوانین و چیدمان دنیای واقعی احترام می‌گذارد. کلید باز کردن این قدرت در درک و پیکربندی صحیح بافر عمق نهفته است.

این راهنمای جامع برای مخاطبان جهانی از توسعه‌دهندگان وب، علاقه‌مندان به XR و فناوران خلاق طراحی شده است. ما اصول بنیادی سنجش عمق را بررسی خواهیم کرد، گزینه‌های پیکربندی API WebXR را تشریح می‌کنیم و راهنمایی‌های عملی و گام‌به‌گام برای پیاده‌سازی ویژگی‌های پیشرفته AR مانند انسداد واقع‌گرایانه و فیزیک ارائه خواهیم داد. در پایان، شما دانش لازم برای تسلط بر پیکربندی بافر عمق و ساخت نسل بعدی برنامه‌های WebXR جذاب و آگاه از زمینه را خواهید داشت.

درک مفاهیم اصلی

قبل از اینکه به جزئیات API بپردازیم، ساختن یک پایه محکم بسیار مهم است. بیایید مفاهیم اصلی را که واقعیت افزوده آگاه از عمق را قدرت می‌بخشند، رمزگشایی کنیم.

نقشه عمق (Depth Map) چیست؟

تصور کنید به یک اتاق نگاه می‌کنید. مغز شما بدون زحمت صحنه را پردازش می‌کند و می‌فهمد که میز از دیوار نزدیک‌تر است و صندلی جلوی میز قرار دارد. یک نقشه عمق، نمایش دیجیتالی این درک است. در هسته خود، نقشه عمق یک تصویر دو‌بعدی است که در آن مقدار هر پیکسل نه رنگ، بلکه فاصله آن نقطه در دنیای فیزیکی از سنسور (دوربین دستگاه شما) را نشان می‌دهد.

آن را مانند یک تصویر سیاه‌وسفید در نظر بگیرید: پیکسل‌های تیره‌تر ممکن است نمایانگر اشیائی باشند که بسیار نزدیک هستند، در حالی که پیکسل‌های روشن‌تر نمایانگر اشیائی هستند که دورتر قرار دارند (یا برعکس، بسته به قرارداد). این داده‌ها معمولاً توسط سخت‌افزارهای تخصصی ثبت می‌شوند، مانند:

• سنسورهای زمان پرواز (Time-of-Flight - ToF): این سنسورها یک پالس نور فروسرخ ساطع می‌کنند و زمان لازم برای بازگشت نور پس از برخورد به یک شیء را اندازه‌گیری می‌کنند. این اختلاف زمانی مستقیماً به فاصله تبدیل می‌شود.
• لیدار (LiDAR - Light Detection and Ranging): شبیه به ToF اما اغلب دقیق‌تر، LiDAR از پالس‌های لیزر برای ایجاد یک ابر نقطه‌ای با وضوح بالا از محیط استفاده می‌کند که سپس به یک نقشه عمق تبدیل می‌شود.
• دوربین‌های استریوسکوپیک (Stereoscopic Cameras): با استفاده از دو یا چند دوربین، یک دستگاه می‌تواند دید دوچشمی انسان را تقلید کند. این دستگاه تفاوت‌ها (ناهمخوانی) بین تصاویر هر دوربین را برای محاسبه عمق تجزیه و تحلیل می‌کند.

API WebXR سخت‌افزار زیربنایی را پنهان می‌کند و یک نقشه عمق استاندارد را برای کار در اختیار توسعه‌دهندگان قرار می‌دهد، صرف نظر از نوع دستگاه.

چرا سنجش عمق برای واقعیت افزوده حیاتی است؟

یک نقشه عمق ساده، دنیایی از امکانات را باز می‌کند که اساساً تجربه AR کاربر را تغییر می‌دهد و آن را از یک سرگرمی صرف به یک تعامل واقعاً باورپذیر ارتقا می‌دهد.

• انسداد (Occlusion): این مسلماً مهم‌ترین مزیت است. انسداد، توانایی اشیاء دنیای واقعی برای مسدود کردن دید اشیاء مجازی است. با یک نقشه عمق، برنامه شما فاصله دقیق سطح دنیای واقعی را در هر پیکسل می‌داند. اگر یک شیء مجازی که در حال رندر کردن آن هستید دورتر از سطح دنیای واقعی در همان پیکسل باشد، می‌توانید به سادگی تصمیم بگیرید که آن را ترسیم نکنید. این عمل ساده باعث می‌شود یک شخصیت مجازی به طور متقاعدکننده‌ای پشت یک مبل واقعی راه برود یا یک توپ دیجیتال زیر یک میز واقعی غلت بزند و حس عمیقی از یکپارچگی ایجاد کند.
• فیزیک و تعاملات: یک شیء مجازی ثابت جالب است، اما یک شیء تعاملی جذاب است. سنجش عمق امکان شبیه‌سازی‌های فیزیکی واقع‌گرایانه را فراهم می‌کند. یک توپ مجازی می‌تواند از یک کف واقعی جهش کند، یک شخصیت دیجیتال می‌تواند در اطراف مبلمان واقعی حرکت کند و رنگ مجازی می‌تواند روی یک دیوار فیزیکی پاشیده شود. این امر تجربه‌ای پویا و پاسخگو ایجاد می‌کند.
• بازسازی صحنه: با تجزیه و تحلیل نقشه عمق در طول زمان، یک برنامه می‌تواند یک مش سه‌بعدی ساده‌شده از محیط بسازد. این درک هندسی برای AR پیشرفته حیاتی است و ویژگی‌هایی مانند نورپردازی واقع‌گرایانه (ایجاد سایه روی سطوح واقعی) و قرار دادن هوشمند اشیاء (قرار دادن یک گلدان مجازی روی یک میز واقعی) را امکان‌پذیر می‌سازد.
• واقع‌گرایی بهبودیافته: در نهایت، همه این ویژگی‌ها به تجربه‌ای واقع‌گرایانه‌تر و فراگیرتر کمک می‌کنند. هنگامی که محتوای دیجیتال فضای فیزیکی کاربر را به رسمیت می‌شناسد و با آن تعامل می‌کند، مانع بین دو جهان را می‌شکند و حس عمیق‌تری از حضور را تقویت می‌کند.

API سنجش عمق WebXR: یک نمای کلی

ماژول سنجش عمق، افزونه‌ای برای API اصلی دستگاه WebXR است. همانند بسیاری از فناوری‌های وب پیشرفته، ممکن است به طور پیش‌فرض در همه مرورگرها فعال نباشد و ممکن است به پرچم‌های (flags) خاصی نیاز داشته باشد یا بخشی از یک Origin Trial باشد. ضروری است که برنامه خود را به صورت تدافعی بسازید و همیشه قبل از تلاش برای استفاده از این ویژگی، پشتیبانی از آن را بررسی کنید.

بررسی پشتیبانی

قبل از اینکه بتوانید یک جلسه را درخواست کنید، ابتدا باید از مرورگر بپرسید که آیا از حالت 'immersive-ar' با ویژگی 'depth-sensing' پشتیبانی می‌کند یا خیر. این کار با استفاده از متد `navigator.xr.isSessionSupported()` انجام می‌شود.

async function checkDepthSensingSupport() {
  if (!navigator.xr) {
    console.log("WebXR در دسترس نیست.");
    return false;
  }

  try {
    const supported = await navigator.xr.isSessionSupported('immersive-ar');
    if (supported) {
        // اکنون ویژگی خاص را بررسی می‌کنیم
        const session = await navigator.xr.requestSession('immersive-ar', {
            requiredFeatures: ['depth-sensing']
        });
        // اگر این کار موفقیت‌آمیز باشد، ویژگی پشتیبانی می‌شود. می‌توانیم جلسه آزمایشی را پایان دهیم.
        await session.end();
        console.log("WebXR AR با سنجش عمق پشتیبانی می‌شود!");
        return true;
    } else {
        console.log("WebXR AR در این دستگاه پشتیبانی نمی‌شود.");
        return false;
    }
  } catch (error) {
    console.log("خطا در بررسی پشتیبانی از سنجش عمق:", error);
    return false;
  }
}

یک راه مستقیم‌تر، هرچند کمتر کامل، این است که مستقیماً درخواست جلسه را امتحان کنید و خطا را بگیرید، اما روش بالا برای بررسی قابلیت‌ها از قبل، قوی‌تر است.

درخواست یک جلسه

پس از تأیید پشتیبانی، با قرار دادن 'depth-sensing' در آرایه `requiredFeatures` یا `optionalFeatures` یک جلسه XR را درخواست می‌کنید. نکته کلیدی این است که یک شیء پیکربندی را به همراه نام ویژگی ارسال کنید، که در آنجا ترجیحات خود را تعریف می‌کنیم.

async function startXRSession() {
  const session = await navigator.xr.requestSession('immersive-ar', {
    requiredFeatures: ['local-floor', 'dom-overlay'], // سایر ویژگی‌های رایج
    optionalFeatures: [
      {
        name: 'depth-sensing',
        usagePreference: ['cpu-optimized', 'gpu-optimized'],
        dataFormatPreference: ['float32', 'luminance-alpha']
      }
    ]
  });
  // ... با راه‌اندازی جلسه ادامه دهید
}

توجه داشته باشید که 'depth-sensing' اکنون یک شیء است. اینجاست که ما نکات پیکربندی خود را به مرورگر ارائه می‌دهیم. بیایید این گزینه‌های حیاتی را تشریح کنیم.

پیکربندی بافر عمق: قلب ماجرا

قدرت API سنجش عمق در انعطاف‌پذیری آن نهفته است. شما می‌توانید به مرورگر بگویید که چگونه قصد دارید از داده‌های عمق استفاده کنید، که به آن امکان می‌دهد اطلاعات را در کارآمدترین فرمت برای مورد استفاده شما ارائه دهد. این پیکربندی در داخل شیء توصیفگر ویژگی، عمدتاً از طریق دو ویژگی انجام می‌شود: `usagePreference` و `dataFormatPreference`.

`usagePreference`: پردازنده (CPU) یا پردازنده گرافیکی (GPU)؟

ویژگی `usagePreference` آرایه‌ای از رشته‌ها است که مورد استفاده اصلی شما را به عامل کاربر (UA)، یعنی مرورگر، اعلام می‌کند. این به سیستم اجازه می‌دهد تا برای عملکرد، دقت و مصرف انرژی بهینه‌سازی کند. شما می‌توانید چندین کاربرد را به ترتیب اولویت درخواست کنید.

'gpu-optimized' (بهینه‌سازی‌شده برای GPU)

• معنی آن چیست: شما به مرورگر می‌گویید که هدف اصلی شما استفاده مستقیم از داده‌های عمق روی GPU است، به احتمال زیاد در شیدرها (shaders) برای اهداف رندرینگ.
• نحوه ارائه داده‌ها: نقشه عمق به عنوان یک `WebGLTexture` در دسترس قرار می‌گیرد. این روش فوق‌العاده کارآمد است زیرا داده‌ها هرگز نیازی به ترک حافظه GPU برای استفاده در رندرینگ ندارند.
• کاربرد اصلی: انسداد (Occlusion). با نمونه‌برداری از این بافت (texture) در فرگمنت شیدر خود، می‌توانید عمق دنیای واقعی را با عمق شیء مجازی خود مقایسه کرده و فرگمنت‌هایی را که باید پنهان شوند، حذف کنید. این همچنین برای سایر افکت‌های مبتنی بر GPU مانند ذرات آگاه از عمق یا سایه‌های واقع‌گرایانه مفید است.
• عملکرد: این گزینه بالاترین عملکرد را برای وظایف رندرینگ دارد. از گلوگاه عظیم انتقال حجم زیادی از داده‌ها از GPU به CPU در هر فریم جلوگیری می‌کند.

'cpu-optimized' (بهینه‌سازی‌شده برای CPU)

• معنی آن چیست: شما نیاز دارید که به مقادیر خام عمق مستقیماً در کد جاوا اسکریپت خود روی CPU دسترسی داشته باشید.
• نحوه ارائه داده‌ها: نقشه عمق به عنوان یک `ArrayBuffer` قابل دسترسی در جاوا اسکریپت در دسترس قرار می‌گیرد. شما می‌توانید هر مقدار عمق را بخوانید، تجزیه و تحلیل کنید.
• کاربردهای اصلی: فیزیک، تشخیص برخورد، و تحلیل صحنه. به عنوان مثال، می‌توانید یک raycast انجام دهید تا مختصات سه‌بعدی نقطه‌ای را که کاربر روی آن ضربه می‌زند پیدا کنید، یا می‌توانید داده‌ها را برای یافتن سطوح صاف مانند میزها یا کف‌ها برای قرار دادن اشیاء تجزیه و تحلیل کنید.
• عملکرد: این گزینه هزینه عملکرد قابل توجهی دارد. داده‌های عمق باید از سنسور/GPU دستگاه به حافظه اصلی سیستم کپی شوند تا CPU به آنها دسترسی پیدا کند. انجام محاسبات پیچیده روی این آرایه بزرگ از داده‌ها در هر فریم در جاوا اسکریپت به راحتی می‌تواند منجر به مشکلات عملکرد و نرخ فریم پایین شود. باید با دقت و به ندرت استفاده شود.

توصیه: اگر قصد پیاده‌سازی انسداد را دارید، همیشه 'gpu-optimized' را درخواست کنید. می‌توانید هر دو را درخواست کنید، به عنوان مثال: `['gpu-optimized', 'cpu-optimized']`. مرورگر سعی خواهد کرد اولویت اول شما را رعایت کند. کد شما باید به اندازه کافی قوی باشد تا بررسی کند که کدام مدل استفاده واقعاً توسط سیستم اعطا شده است و هر دو حالت را مدیریت کند.

`dataFormatPreference`: دقت در مقابل سازگاری

ویژگی `dataFormatPreference` آرایه‌ای از رشته‌ها است که به فرمت داده و دقت مورد نظر مقادیر عمق اشاره می‌کند. این انتخاب هم بر دقت و هم بر سازگاری سخت‌افزاری تأثیر می‌گذارد.

'float32'

• معنی آن چیست: هر مقدار عمق یک عدد ممیز شناور ۳۲ بیتی کامل است.
• چگونه کار می‌کند: مقدار مستقیماً فاصله را بر حسب متر نشان می‌دهد. نیازی به رمزگشایی نیست؛ می‌توانید از آن همانطور که هست استفاده کنید. به عنوان مثال، مقدار ۱.۵ در بافر به این معنی است که آن نقطه ۱.۵ متر فاصله دارد.
• مزایا: دقت بالا و استفاده بسیار آسان هم در شیدرها و هم در جاوا اسکریپت. این فرمت ایده‌آل برای دقت است.
• معایب: به WebGL 2 و سخت‌افزاری که از بافت‌های ممیز شناور پشتیبانی می‌کند (مانند افزونه `OES_texture_float`) نیاز دارد. این فرمت ممکن است روی همه دستگاه‌های تلفن همراه، به ویژه دستگاه‌های قدیمی‌تر، در دسترس نباشد.

'luminance-alpha'

• معنی آن چیست: این فرمتی است که برای سازگاری با WebGL 1 و سخت‌افزاری که از بافت‌های float پشتیبانی نمی‌کند، طراحی شده است. از دو کانال ۸ بیتی (luminance و alpha) برای ذخیره یک مقدار عمق ۱۶ بیتی استفاده می‌کند.
• چگونه کار می‌کند: مقدار خام عمق ۱۶ بیتی به دو بخش ۸ بیتی تقسیم می‌شود. برای به دست آوردن عمق واقعی، باید این بخش‌ها را در کد خود دوباره ترکیب کنید. فرمول معمولاً این است: `decodedValue = luminanceValue + alphaValue / 255.0`. نتیجه یک مقدار نرمال‌شده بین ۰.۰ و ۱.۰ است که سپس باید با یک فاکتور جداگانه مقیاس‌بندی شود تا فاصله بر حسب متر به دست آید.
• مزایا: سازگاری سخت‌افزاری بسیار گسترده‌تر. این یک جایگزین قابل اعتماد است زمانی که 'float32' پشتیبانی نمی‌شود.
• معایب: نیاز به یک مرحله رمزگشایی اضافی در شیدر یا جاوا اسکریپت شما دارد که مقدار کمی پیچیدگی اضافه می‌کند. همچنین دقت کمتری (۱۶ بیتی) در مقایسه با 'float32' ارائه می‌دهد.

توصیه: هر دو را درخواست کنید، با فرمت مورد نظر خود در ابتدا: `['float32', 'luminance-alpha']`. این به مرورگر می‌گوید که شما فرمت با دقت بالا را ترجیح می‌دهید اما در صورت لزوم می‌توانید فرمت سازگارتر را نیز مدیریت کنید. باز هم، برنامه شما باید بررسی کند که کدام فرمت اعطا شده و منطق صحیح را برای پردازش داده‌ها اعمال کند.

پیاده‌سازی عملی: یک راهنمای گام به گام

اکنون، بیایید این مفاهیم را در یک پیاده‌سازی عملی ترکیب کنیم. ما بر روی رایج‌ترین مورد استفاده تمرکز خواهیم کرد: انسداد واقع‌گرایانه با استفاده از یک بافر عمق بهینه‌سازی‌شده برای GPU.

مرحله ۱: تنظیم درخواست جلسه XR قوی

ما جلسه را با ترجیحات ایده‌آل خود درخواست خواهیم کرد، اما برنامه خود را طوری طراحی می‌کنیم که جایگزین‌ها را نیز مدیریت کند.

let xrSession = null;
let xrDepthInfo = null;

async function onXRButtonClick() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['local-floor'],
      domOverlay: { root: document.body }, // مثالی از یک ویژگی دیگر
      depthSensing: {
        usagePreference: ['gpu-optimized'],
        dataFormatPreference: ['float32', 'luminance-alpha']
      }
    });

    // ... منطق شروع جلسه، تنظیم بوم، زمینه WebGL و غیره
    // در منطق شروع جلسه خود، پیکربندی سنجش عمق را دریافت کنید
    const depthSensing = xrSession.depthSensing;
    if (depthSensing) {
      console.log(`سنجش عمق با کاربرد زیر اعطا شد: ${depthSensing.usage}`);
      console.log(`سنجش عمق با فرمت داده زیر اعطا شد: ${depthSensing.dataFormat}`);
    } else {
      console.warn("سنجش عمق درخواست شد اما اعطا نشد.");
    }
    
    xrSession.requestAnimationFrame(onXRFrame);
  } catch (e) {
    console.error("شروع جلسه XR ناموفق بود.", e);
  }
}

مرحله ۲: دسترسی به اطلاعات عمق در حلقه رندر

در داخل تابع `onXRFrame` شما، که در هر فریم فراخوانی می‌شود، باید اطلاعات عمق را برای نمای فعلی دریافت کنید.

function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrReferenceSpace);
  if (!pose) return;

  const glLayer = session.renderState.baseLayer;
  const gl = webglContext; // زمینه WebGL شما
  gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

  for (const view of pose.views) {
    const viewport = glLayer.getViewport(view);
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

    // مرحله حیاتی: دریافت اطلاعات عمق
    const depthInfo = frame.getDepthInformation(view);

    if (depthInfo) {
      // ما داده‌های عمق را برای این فریم و نما داریم!
      // این را به تابع رندرینگ خود منتقل می‌کنیم
      renderScene(view, depthInfo);
    } else {
      // داده عمقی برای این فریم در دسترس نیست
      renderScene(view, null);
    }
  }
}

شیء `depthInfo` (نمونه‌ای از `XRDepthInformation`) شامل همه چیزهایی است که ما نیاز داریم:

• `depthInfo.texture`: بافت `WebGLTexture` حاوی نقشه عمق (در صورت استفاده از 'gpu-optimized').
• `depthInfo.width`, `depthInfo.height`: ابعاد بافت عمق.
• `depthInfo.normDepthFromNormView`: یک `XRRigidTransform` (ماتریس) که برای تبدیل مختصات نمای نرمال‌شده به مختصات بافت صحیح برای نمونه‌برداری از نقشه عمق استفاده می‌شود. این برای تراز صحیح داده‌های عمق با تصویر دوربین رنگی حیاتی است.
• `depthInfo.rawValueToMeters`: یک فاکتور مقیاس. شما مقدار خام از بافت را در این عدد ضرب می‌کنید تا فاصله را بر حسب متر به دست آورید.

مرحله ۳: پیاده‌سازی انسداد با یک بافر عمق بهینه‌سازی‌شده برای GPU

اینجاست که جادو اتفاق می‌افتد، در داخل شیدرهای GLSL شما. هدف این است که عمق دنیای واقعی (از بافت) را با عمق شیء مجازی که در حال حاضر ترسیم می‌کنیم، مقایسه کنیم.

ورِتِکس شیدر (ساده‌شده)

ورتکس شیدر عمدتاً استاندارد است. رأس‌های شیء را تبدیل می‌کند و به طور حیاتی موقعیت فضای کلیپ (clip-space) را به فرگمنت شیدر منتقل می‌کند.

// GLSL (Vertex Shader)
attribute vec3 a_position;
uniform mat4 u_projectionMatrix;
uniform mat4 u_modelViewMatrix;
varying vec4 v_clipPosition;

void main() {
  vec4 position = u_modelViewMatrix * vec4(a_position, 1.0);
  gl_Position = u_projectionMatrix * position;
  v_clipPosition = gl_Position;
}

فرگمنت شیدر (منطق اصلی)

فرگمنت شیدر کار سنگین را انجام می‌دهد. ما باید بافت عمق و فراداده‌های مربوط به آن را به عنوان یونیفرم (uniforms) ارسال کنیم.

// GLSL (Fragment Shader)
precision mediump float;

varying vec4 v_clipPosition;

uniform sampler2D u_depthTexture;
uniform mat4 u_normDepthFromNormViewMatrix;
uniform float u_rawValueToMeters;
// یک یونیفرم برای اطلاع دادن به شیدر که آیا از float32 یا luminance-alpha استفاده می‌کنیم
uniform bool u_isFloatTexture;

// تابعی برای دریافت عمق دنیای واقعی بر حسب متر برای فرگمنت فعلی
float getDepth(vec2 screenUV) {
  // تبدیل از UV صفحه به UV بافت عمق
  vec2 depthUV = (u_normDepthFromNormViewMatrix * vec4(screenUV, 0.0, 1.0)).xy;

  // اطمینان از اینکه خارج از بافت نمونه‌برداری نمی‌کنیم
  if (depthUV.x < 0.0 || depthUV.x > 1.0 || depthUV.y < 0.0 || depthUV.y > 1.0) {
    return 10000.0; // اگر خارج بود، یک مقدار بزرگ برگردان
  }

  float rawDepth;
  if (u_isFloatTexture) {
    rawDepth = texture2D(u_depthTexture, depthUV).r;
  } else {
    // رمزگشایی از فرمت luminance-alpha
    vec2 encodedDepth = texture2D(u_depthTexture, depthUV).ra; // .ra معادل .la است
    rawDepth = encodedDepth.x + (encodedDepth.y / 255.0);
  }

  // مدیریت مقادیر عمق نامعتبر (اغلب 0.0)
  if (rawDepth == 0.0) {
    return 10000.0; // آن را به عنوان خیلی دور در نظر بگیر
  }

  return rawDepth * u_rawValueToMeters;
}

void main() {
  // محاسبه مختصات UV فضای صفحه برای این فرگمنت
  // v_clipPosition.w فاکتور تقسیم پرسپکتیو است
  vec2 screenUV = (v_clipPosition.xy / v_clipPosition.w) * 0.5 + 0.5;

  float realWorldDepth = getDepth(screenUV);

  // دریافت عمق شیء مجازی
  // gl_FragCoord.z عمق نرمال‌شده فرگمنت فعلی است [0, 1]
  // ما باید آن را به متر برگردانیم (این به صفحات near/far ماتریس پروجکشن شما بستگی دارد)
  // یک تبدیل خطی ساده‌شده برای نمایش:
  float virtualObjectDepth = v_clipPosition.z / v_clipPosition.w;

  // بررسی انسداد
  if (virtualObjectDepth > realWorldDepth) {
    discard; // این فرگمنت پشت یک شیء دنیای واقعی است، پس آن را ترسیم نکن.
  }

  // اگر به اینجا رسیده‌ایم، شیء قابل مشاهده است. آن را ترسیم کن.
  gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0); // مثال: رنگ سرخابی
}

نکته مهم در مورد تبدیل عمق: تبدیل `gl_FragCoord.z` یا Z فضای کلیپ به یک فاصله خطی بر حسب متر یک کار غیربدیهی است که به ماتریس پروجکشن شما بستگی دارد. خط `float virtualObjectDepth = v_clipPosition.z / v_clipPosition.w;` عمق فضای دید را ارائه می‌دهد که نقطه شروع خوبی برای مقایسه است. برای دقت کامل، شما باید از فرمولی استفاده کنید که شامل صفحات برش نزدیک و دور دوربین شما برای خطی کردن مقدار بافر عمق باشد.

بهترین شیوه‌ها و ملاحظات عملکردی

ساخت تجربیات آگاه از عمق، قوی و با عملکرد بالا نیازمند توجه دقیق به نکات زیر است.

• انعطاف‌پذیر و تدافعی باشید: هرگز فرض نکنید که پیکربندی ترجیحی شما اعطا خواهد شد. همیشه از شیء فعال `xrSession.depthSensing` برای بررسی `usage` و `dataFormat` اعطا شده پرس‌وجو کنید. منطق رندرینگ خود را طوری بنویسید که همه ترکیبات ممکنی را که مایل به پشتیبانی هستید، مدیریت کند.
• GPU را برای رندرینگ در اولویت قرار دهید: تفاوت عملکرد بسیار زیاد است. برای هر کاری که شامل تجسم عمق یا انسداد است، مسیر 'gpu-optimized' تنها گزینه مناسب برای تجربه روان ۶۰/۹۰ فریم بر ثانیه است.
• کارهای CPU را به حداقل برسانید و به تعویق بیندازید: اگر باید از داده‌های 'cpu-optimized' برای فیزیک یا raycasting استفاده کنید، کل بافر را در هر فریم پردازش نکنید. خواندن‌های هدفمند انجام دهید. به عنوان مثال، هنگامی که کاربر روی صفحه ضربه می‌زند، فقط مقدار عمق را در آن مختصات خاص بخوانید. برای انتقال تحلیل‌های سنگین از رشته اصلی، از Web Worker استفاده کنید.
• داده‌های گمشده را به خوبی مدیریت کنید: سنسورهای عمق کامل نیستند. نقشه عمق حاصل دارای حفره‌ها، داده‌های نویزی و عدم دقت خواهد بود، به ویژه روی سطوح بازتابنده یا شفاف. شیدر انسداد و منطق فیزیک شما باید مقادیر عمق نامعتبر (اغلب به صورت ۰) را مدیریت کنند تا از مصنوعات بصری یا رفتار نادرست جلوگیری شود.
• بر سیستم‌های مختصات مسلط شوید: این یک نقطه شکست رایج برای توسعه‌دهندگان است. به سیستم‌های مختصات مختلف (دید، کلیپ، دستگاه نرمال‌شده، بافت) توجه دقیق داشته باشید و اطمینان حاصل کنید که از ماتریس‌های ارائه‌شده مانند `normDepthFromNormView` به درستی برای تراز کردن همه چیز استفاده می‌کنید.
• مصرف انرژی را مدیریت کنید: سخت‌افزار سنجش عمق، به ویژه سنسورهای فعال مانند LiDAR، می‌تواند انرژی قابل توجهی از باتری مصرف کند. فقط زمانی که برنامه شما واقعاً به آن نیاز دارد، ویژگی 'depth-sensing' را درخواست کنید. اطمینان حاصل کنید که جلسه XR شما به درستی معلق و پایان می‌یابد تا در زمانی که کاربر فعالانه درگیر نیست، انرژی ذخیره شود.

آینده سنجش عمق WebXR

سنجش عمق یک فناوری بنیادی است و مشخصات WebXR به تکامل خود در اطراف آن ادامه می‌دهد. جامعه جهانی توسعه‌دهندگان می‌توانند در آینده منتظر قابلیت‌های قدرتمندتری باشند:

• درک صحنه و مش‌بندی (Meshing): گام منطقی بعدی، ماژول XRMesh است که یک مش مثلثی سه‌بعدی واقعی از محیط را که از داده‌های عمق ساخته شده است، ارائه می‌دهد. این امر فیزیک، ناوبری و نورپردازی واقع‌گرایانه‌تری را امکان‌پذیر می‌سازد.
• برچسب‌های معنایی (Semantic Labels): تصور کنید نه تنها هندسه یک سطح را بدانید، بلکه بدانید که آن یک 'کف'، 'دیوار' یا 'میز' است. APIهای آینده احتمالاً این اطلاعات معنایی را ارائه خواهند داد و امکان برنامه‌های فوق‌العاده هوشمند و آگاه از زمینه را فراهم می‌کنند.
• ادغام سخت‌افزاری بهبودیافته: با قدرتمندتر شدن عینک‌های AR و دستگاه‌های تلفن همراه، با سنسورها و پردازنده‌های بهتر، کیفیت، وضوح و دقت داده‌های عمق ارائه‌شده به WebXR به طور چشمگیری بهبود خواهد یافت و امکانات خلاقانه جدیدی را باز خواهد کرد.

نتیجه‌گیری

API سنجش عمق WebXR یک فناوری تحول‌آفرین است که به توسعه‌دهندگان قدرت می‌دهد تا دسته جدیدی از تجربیات واقعیت افزوده مبتنی بر وب را ایجاد کنند. با فراتر رفتن از قرار دادن ساده اشیاء و پذیرش درک محیطی، می‌توانیم برنامه‌هایی بسازیم که واقع‌گرایانه‌تر، تعاملی‌تر و واقعاً با دنیای کاربر یکپارچه باشند. تسلط بر پیکربندی بافر عمق—درک بده‌بستان‌های بین کاربرد 'cpu-optimized' و 'gpu-optimized'، و بین فرمت‌های داده 'float32' و 'luminance-alpha'—مهارت حیاتی مورد نیاز برای باز کردن این پتانسیل است.

با ساخت برنامه‌های انعطاف‌پذیر، با عملکرد بالا و قوی که می‌توانند با قابلیت‌های دستگاه کاربر سازگار شوند، شما فقط یک تجربه واحد ایجاد نمی‌کنید؛ شما به بنیان وب فضایی و فراگیر آینده کمک می‌کنید. ابزارها در دستان شماست. وقت آن است که عمیق شوید و آینده را بسازید.